<template>
  <div class="display-data-box">
    <div class="cron-item-value">
      <div
        v-for="(item, index) in cron"
        :key="index"
        class="item-box"
      >
        <span>{{ item.text }}</span>
        <input
          v-model="item.value"
          class="item-val"
          type="text"
          disabled="disabled"
        >
      </div>
    </div>
    <div class="cron-value">
      {{ cronText }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ["cronData"],
    data() {
      return {
        // 计算要执行的cron
        cron: this.cronData,
        cronText:"" // cron字符串
      }
    },
    watch:{
      cronData: {
        handler() {
          this.cronChange()
        },
        deep:true
      }
    },
    created() {
      this.cronChange()
    },
    methods:{
      cronChange(){
        this.cron = this.cronData
        let arr = []
        this.cronData.forEach((obj) => {
          arr.push(obj.value)
        })
        this.cronText = arr.join(" ")
      }
    }
  }
</script>

<style scoped>
  .display-data-box {
    margin-top: 12px;
  }
  .display-data-box .cron-item-value {
    display: flex;
  }
  .display-data-box .cron-item-value .item-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .display-data-box .cron-item-value .item-box .item-val {
    margin-top: 5px;
    width: 100%;
    border: 1px solid #DCDFE6;
    text-align: center;
    padding: 0 2px;
    box-sizing: border-box;
    height: 23px;
  }
  .display-data-box .cron-item-value .item-box:not(:nth-last-child(1)) .item-val {
    border-right: none;
  }
  .display-data-box .cron-value {
    margin-top: 12px;
    font-size: 14px;
    vertical-align: middle;
    text-align: center;
    height: 21px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>